<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<!DOCTYPE HTML>
<html>
<head>
    <c:set var="contextPath" value="${pageContext.request.contextPath}"/>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>完成案件</title>
    <link rel="stylesheet" type="text/css" href="${contextPath}/resources/city/css/public-style.css"/>
    <link rel="stylesheet" type="text/css" href="${contextPath}/resources/city/css/cancel.css"/>
    <link rel="stylesheet" type="text/css" href="${contextPath}/resources/city/css/public-common.css"/>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <style>
        body, html {
            overflow: auto;
        }

        .title {
            border-bottom: 1px #dbdbdb solid;
            padding-bottom: 0.4rem;
        }
    </style>
</head>
<body>
<!-- 内容 -->
<div id="main">
    <!-- 头部 -->
    <header>
        <img src="${contextPath}/resources/city/image/return.png" id="fanHui"/>
        <span id="tilte">完成案件</span>
    </header>
    <form:form method="post" id="formWarpp" commandName="formDto">
        <form:hidden path="caseUuid"/>
        <div class="content">
            <div class="reason bg">
                <div class="title">案件处理图片/处理结果上传</div>
                <div class="upImg hide">
                    <input type="hidden" name="" value="">
                    <img src="${contextPath}/resources/images/loaders/loader10.gif"/>
                </div>
                <c:forEach items="${formDto.imageList}" var="item" varStatus="status">
                    <div class="upImg">
                        <input type="hidden" name="imageList[${status.index}].url" value="${item.url}">
                        <img src="${item.url}"/>
                    </div>
                </c:forEach>
                <div class='upload' id="ErrorText"></div>
            </div>
        </div>
        <div class="bg-blue" id="SubmitBtn">
            提交
        </div>
        <br/>
    </form:form>
</div>
</body>
<script src="${contextPath}/resources/city/js/remJs.js"></script>
<script src="${contextPath}/resources/city/js/jquery-1.8.0.min.js"></script>
<script>
    $(document).ready(function () {
        $('#fanHui').click(function () {
            self.location.href = "javascript:window.history.go(-1);";
        });

        $(".upload").click(function () {
            wx.chooseImage({
                count: 5,
                sizeType: ['compressed'],
                sourceType: ['album', 'camera'],
                success: function (res) {
                    for (var i = 0; i < res.localIds.length; i++) {
                        addImageItem(res.localIds[i]);
                    }
                }
            });
        });

        function addImageItem(url) {
            wx.uploadImage({
                localId: url,
                isShowProgressTips: 1,
                success: function (res) {
                    var serverId = res.serverId;
                    var clone = $(".upImg:first").clone();
                    clone.removeClass("hide");
                    $(".upImg:last").after(clone);
                    clone.find("img").attr("src", url);
                    clone.find("input").attr("name", "imageList[" + ($(".upImg").length - 2) + "].url").val("wxImage:" + serverId);
                }
            });
        }
    });

    //JSSDK获取地理位置
    wx.config({
        debug: false,
        appId: '${formDto.jsSDKSignature.appid}',
        timestamp: '${formDto.jsSDKSignature.timestamp}',
        nonceStr: '${formDto.jsSDKSignature.nonceStr}',
        signature: '${formDto.jsSDKSignature.signature}',
        jsApiList: ['onMenuShareTimeline',
            'onMenuShareAppMessage',
            'onMenuShareQQ',
            'onMenuShareWeibo',
            'onMenuShareQZone',
            'startRecord',
            'stopRecord',
            'onVoiceRecordEnd',
            'playVoice',
            'pauseVoice',
            'stopVoice',
            'onVoicePlayEnd',
            'uploadVoice',
            'downloadVoice',
            'chooseImage',
            'previewImage',
            'uploadImage',
            'downloadImage',
            'translateVoice',
            'getNetworkType',
            'openLocation',
            'getLocation',
            'hideOptionMenu',
            'showOptionMenu',
            'hideMenuItems',
            'showMenuItems',
            'hideAllNonBaseMenuItem',
            'showAllNonBaseMenuItem',
            'closeWindow',
            'scanQRCode',
            'chooseWXPay',
            'openProductSpecificView',
            'addCard',
            'chooseCard',
            'openCard']
    });

    $("#SubmitBtn").click(function () {
        var serialize = $("#formWarpp").serialize();
        $.ajax({
            url: 'finish',
            data: serialize,
            type: 'post',
            cache: false,
            success: function (data) {
                if (data.state) {
                    self.location.href = "case_complete.htm";
                } else {
                    $("#ErrorText").css("border-color", "red");
                }
            },
            error: function () {
                alert("失败");
            }
        });
    });
</script>
</html>